<template>
	<sl-page title="填写申请">
		<!-- 表单组件 -->
		<view class="s-form address">
			<view class="s-form__item">
				<view class="s-form__item--label flex-basis-20">姓名</view>
				<view class="s-form__item--control">
					<input class="form-item--input" type="text" v-model="form.realName" maxlength="30" placeholder="请输入姓名" />
				</view>
			</view>
			<view class="s-form__item">
				<view class="s-form__item--label flex-basis-20">身份证号</view>
				<view class="s-form__item--control">
					<input class="form-item--input" type="number" v-model="form.idcard" maxlength="30" placeholder="请输身份证号" />
				</view>
			</view>
			<view class="s-form__item">
				<view class="s-form__item--label flex-basis-20">身份证人像面</view>
				<view class="s-form__item--control">
					<!-- <material-select v-model="form.identificationOutside" :count="1" width="220px" height="120px" /> -->
					<view class="image-uploader" @click="onSelectImage">
						<view class="image-uploader__image">
							<sl-image :value="form.identificationOutside" v-if="form.identificationOutside"></sl-image>
						</view>
						<view class="image-uploader__btn">上传图片</view>
					</view>
				</view>
			</view>
			<view class="s-form__item">
				<view class="s-form__item--label flex-basis-20">身份证国徽面</view>
				<view class="s-form__item--control">
					<!-- <material-select v-model="form.identificationInside" :count="1" width="220px" height="120px" /> -->
				</view>
			</view>
			<view class="s-form__item">
				<view class="s-form__item--label flex-basis-20">手持身份证照片</view>
				<view class="s-form__item--control">
					<!-- <material-select v-model="form.identificationSelf" :count="1" width="220px" height="120px" /> -->
				</view>
			</view>
			<view class="s-form__item" @click="industrySelect.show = true">
				<view class="s-form__item--label flex-basis-20">所属行业</view>
				<view class="s-form__item--control">
					<input class="form-item--input" type="text" v-model="form.industryName" placeholder="请选择" readonly="true"
						disabled="true" @click="industrySelect.show = true" />
				</view>
				<view class="s-form__item--append flex-middle-center">
					<view class="region-select icon iconfont icon-dingwei"></view>
				</view>
			</view>
			<view class="s-form__item" @click="regionSelect.show = true">
				<view class="s-form__item--label flex-basis-20">自媒体平台</view>
				<view class="s-form__item--control">
					<input class="form-item--input" type="text" v-model="form.mediaPlatformName" placeholder="请选择" readonly="true"
						disabled="true" @click="mediaPlatformSelect.show = true" />
				</view>
				<view class="s-form__item--append flex-middle-center">
					<view class="region-select icon iconfont icon-dingwei"></view>
				</view>
			</view>
			<view class="s-form__item">
				<view class="s-form__item--label flex-basis-20">平台账号</view>
				<view class="s-form__item--control">
					<input class="form-item--input" type="text" v-model="form.mediaNumber" placeholder="请输入平台账号" />
				</view>
			</view>
			<view class="s-form__item">
				<view class="s-form__item--label flex-basis-20">手机号</view>
				<view class="s-form__item--control">
					<input class="form-item--input" type="text" v-model="form.phone" placeholder="请输入手机号" />
				</view>
			</view>
		</view>
		<sl-flooter>
			<view class="btn-primary" :class="{'disable': !verifyPassed}" @click.stop="onSubmit()">提交申请</view>
		</sl-flooter>
		<Industry :show.sync="industrySelect.show" @region:picker="onIndustryPicker"></Industry>
		<MediaPlatform :show.sync="mediaPlatformSelect.show" @region:picker="onMediaPlatformPicker"></MediaPlatform>
	</sl-page>
</template>

<script>
	import * as Verify from '@/utils/verify';
	import DistributionApi from '@/api/distribution/distribution.js';
	import MaterialSelect from '@/components/material/files.vue';
	import Industry from '@/pages/components/picker/industry.vue';
	import MediaPlatform from '@/pages/components/picker/mediaPlatform.vue';
	import Constants from '@/constants';
	import Upload from '@/components/material/upload.js';
	//
	export default {
		//
		name: 'applyCreate',
		//
		mixins: [Constants, Upload],
		//
		components: {
			MaterialSelect,
			Industry,
			MediaPlatform,
		},
		//
		data() {
			return {
				idcardFlag: '1',
				idcardImgFlag: '1',
				//为什么会有是否可以申请
				openSale: 'true',
				phoneFlag: '1',
				realNameFlag: '1',
				//
				form: {
					realName: '',
					idcard: '',
					identificationOutside: '',
					identificationInside: '',
					identificationSelf: '',
					industryId: '',
					industryName: '',
					mediaPlatformId: '',
					mediaPlatformName: '',
					mediaNumber: '',
					phone: '',
					idcardImg: '1',
					idcardImg2: '2',
					idcardImg3: '3',
					industry: '4',
					wemedia: '5',

				},
				industrySelect: {
					show: false
				},
				mediaPlatformSelect: {
					show: false
				},
				verifyPassed_realName: false,
				verifyPassed_idcard: false,
				verifyPassed_identificationOutside: false,
				verifyPassed_identificationInside: false,
				verifyPassed_identificationSelf: false,
				verifyPassed_industryId: false,
				verifyPassed_industryName: false,
				verifyPassed_mediaPlatformId: false,
				verifyPassed_mediaPlatformName: false,
				verifyPassed_mediaNumber: false,
				verifyPassed_phone: false
			};
		},
		watch: {
			'form.realName': function() {
				this.verifyPassed_realName = this.VerifyRealName();
			},
			'form.idcard': function() {
				this.verifyPassed_idcard = this.VerifyIdcard();
			},
			'form.industryName': function() {
				this.verifyPassed_industryName = this.VerifyIndustryName();
			},
			'form.mediaPlatformName': function() {
				this.verifyPassed_mediaPlatformName = this.VerifyMediaPlatformName();
			},
			'form.mediaNumber': function() {
				this.verifyPassed_mediaNumber = this.VerifyMediaNumber();
			},
			'form.phone': function() {
				this.verifyPassed_phone = this.VerifyPhone();
			},
		},
		computed: {
			verifyPassed: function() {
				return this.verifyPassed_realName && this.verifyPassed_idcard && this.verifyPassed_industryName &&
					this.verifyPassed_mediaPlatformName && this.verifyPassed_mediaNumber && this.verifyPassed_phone;
			}
		},
		//
		onLoad(options) {
			console.log('options: ---------------------------------', options);
		},
		methods: {
			VerifyRealName: function() {
				return !Verify.isEmpty(this.form.realName);
			},

			VerifyIdcard: function() {
				return !(Verify.isEmpty(this.form.idcard))
			},
			// VerifyIndustryName: function() {
			// 	return !(Verify.isEmpty(this.form.industryName))
			// },
			// VerifyMediaPlatformName: function() {
			// 	return !(Verify.isEmpty(this.form.mediaPlatformName))
			// },
			// VerifyMediaNumber: function() {
			// 	return !(Verify.isEmpty(this.form.mediaNumber))
			// },
			VerifyPhone: function() {
				return !(Verify.isEmpty(this.form.phone) || !Verify.isMobile(this.form.phone))
			},
			onSubmit() {

				if (!this.VerifyRealName()) {
					this.$app.toast('请输入姓名')
					return;
				}
				// this.$app.navTo(this.pages.resultApplyPage);
				if (!this.VerifyIdcard()) {
					this.$app.toast('请输入正确的身份证号')
					return;
				}
				if (!this.VerifyPhone()) {
					this.$app.toast('请输入正确的手机号')
					return;
				}
				// if (!this.VerifyAreaName()) {
				// 	this.$app.toast('请选择所在区域!')
				// 	return;
				// }
				// if (!this.VerifyAddress()) {
				// 	this.$app.toast('请输入详细地址!')
				// 	return;
				// }

				// // 提交收货地址
				this.doSubmit();
			},
			doSubmit() {

				DistributionApi.save(this.form).then((res) => {
					console.log('res:----------------- ', res);
					console.log('res:----------------- ', this.form);
					this.$app.toast('申请分销员成功!');
					this.$app.navTo(this.pages.resultApplyPage, {
						isEnd: false,
						name: res.msg
					});
				});
			},
			onIndustryPicker: function(region) {
				if (region) {
					this.form.industryId = region.id;
					this.form.industryName = region.name;
				}
			},
			onMediaPlatformPicker: function(region) {
				if (region) {
					this.form.mediaPlatformId = region.id;
					this.form.mediaPlatformName = region.name;
				}
			},
			onSelectImage: function() {
				console.log("选择文件");
				this.uploadImages();
			},
			emitUploadFile: function(file) {
				console.log("上传的文件：", file)
				this.form.identificationOutside = JSON.stringify({
					id: file.id
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.address {
		margin: 24rpx 16rpx;
	}

	.action {
		width: 530rpx;
		margin: 0 auto;
		margin-top: 72rpx;
	}

	.region-select {
		font-size: $uni-iconfont-size;
	}

	.image-uploader {
		background-color: $uni-bg-color;

		.image-uploader__image {
			position: relative;
			width: 128rpx;
			height: 128rpx;
			overflow: hidden;
			border: 2rpx solid #CCCCCC;
			margin-right: 34rpx;
			border-radius: 12rpx;
		}
	}
</style>